<!-- 可编辑单元格组件 -->
<template>
    <div class="editable-cell-process">
        <div v-if="editable" class="editable-cell-input-wrapper">
            <div v-if="col=='processMethod'">
                <!--加工方式-->
                <a-select @change="handleSelectChange" @blur="handleSelectBlur" :defaultOpen="true" v-model="processMethod" ref="focusid">
                    <a-select-option value="1" label="">
                        自制加工
                    </a-select-option>
                    <a-select-option value="2" label="">
                        委外加工
                    </a-select-option>
                </a-select>
            </div>
            <div v-else-if="col=='workFlag'">
                <!--工序标识-->
                <a-select @change="handleSelectChange" @blur="handleSelectBlur" :defaultOpen="true" v-model="workFlag" ref="focusid">
                    <a-select-option value="1" label="">
                        首工序
                    </a-select-option>
                    <a-select-option value="3" label="">
                        中间工序
                    </a-select-option>
                    <a-select-option value="2" label="">
                        尾工序
                    </a-select-option>
                </a-select>
            </div>

            <div v-else-if="col=='inspectMethod'">
                <!--检验方式-->
                <a-select @change="handleSelectChange" @blur="handleSelectBlur" :defaultOpen="true" v-model="inspectMethod" ref="focusid">
                    <a-select-option value="1" label="">
                        免检
                    </a-select-option>
                    <a-select-option value="2" label="">
                        过程检验
                    </a-select-option>
                    <a-select-option value="3" label="">
                        完工检验
                    </a-select-option>
                </a-select>
            </div>
            <div v-else-if="col=='deliveryMethod'">
                <!--发料方式-->
                <a-select @change="handleSelectChange" @blur="handleSelectBlur" :defaultOpen="true" v-model="deliveryMethod" ref="focusid">
                    <a-select-option value="1" label="">
                        直接领料
                    </a-select-option>
                    <a-select-option value="2" label="">
                        调拨领料
                    </a-select-option>
                    <a-select-option value="3" label="">
                        直接倒冲
                    </a-select-option>
                    <a-select-option value="4" label="">
                        调拨倒冲
                    </a-select-option>
                    <a-select-option value="5" label="">
                        不发料
                    </a-select-option>
                </a-select>
            </div>

            <div v-else-if="col=='supplyType'">
                <!--供应类型-->
                <a-select @change="handleSelectChange" @blur="handleSelectBlur" :defaultOpen="true" v-model="supplyType" ref="focusid">
                    <a-select-option value="1" label="">
                        采购
                    </a-select-option>
                    <a-select-option value="2" label="">
                        自制
                    </a-select-option>
                    <a-select-option value="3" label="">
                        委外
                    </a-select-option>
                </a-select>
            </div>
            <!--物料编码-->
            <div v-else-if="col == 'inventoryCode'">
                <div id="archiveBox">
                    <div id="closesModel"></div>
                    <a-input :value="value" ref="focusSearchid" @keyup="archivesData" @pressEnter="archivesEnter" />
                    <searchCheckBoxArchives :checkType="checkType" ref="searchRef" :inputVal="value" @check="archivesCheck"></searchCheckBoxArchives>
                </div>
            </div>
            <!--搜索-->
            <div v-else-if="columnType == '搜索选择' && col != 'inventoryCode'">
                <!--银行名称 || 银行账户 || 项目 || 币种 || 部门-->
                <searchGroupDetail ref="searchComponents" :record="record" :inputValue="text" :componentName="componentName" @clickItem="searchBackData"></searchGroupDetail>
            </div>
            <!--日期-->
            <div v-else-if="columnType == '日期'">
                <a-date-picker :value="value" :open="true" ref="timeRef" @change="onChangeTime" @ok="onOkTime" @blur="onBlurTime" :default-value="moment()" format="YYYY-MM-DD" show-time />
            </div>

            <!--下拉选择-->
            <div v-else-if="columnType == '下拉选择'">
                <a-select placeholder="请选择" ref="focusid" @change="value=>dropDownChange(value)" :defaultOpen="true" @blur="dropDownBlur">
                    <a-select-option v-for="(key,index) in valSelect" :key="index" :value="key.key">
                        {{key.label}}
                    </a-select-option>
                </a-select>
            </div>

            <div v-else-if="col=='requireQuantity'|| col=='lossRate' || col=='operationQuantity'|| col=='adjustNumber' || col=='adjustProportion'|| col=='plannedQuantity' || col=='lossQuantity' || col=='lossRate'">
                <!--标准用量，子件损耗率,运算数量，调整数量，调整比例-->
                <a-input onkeyup="value=value.toString().match(/^\d+(?:\.\d{0,2})?/)" :value="value" ref="focusid" @change="handleChange" @pressEnter="check" @blur="checkClose" />
            </div>
            <a-input v-else :value="value" ref="focusid" @change="handleChange" @pressEnter="check" @blur="checkClose" />
        </div>
        <div v-else class="editable-cell-text-wrapper" @click="edit" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
            <div style="text-align:right;padding-right:2px;" v-if="value && (col == 'adjustProportion')">{{value}}%</div>
            <div style="text-align:right;padding-right:2px;" v-else-if="value && (col=='adjustNumber'||col=='operationQuantity'||col=='adjustProportion'|| col=='plannedQuantity' || col=='lossQuantity' || col=='lossRate' || col == 'baseQuantity')">{{value| NumFormat }}</div>
            <div v-else>{{ value || '&nbsp;' }}</div>
        </div>
    </div>
</template>
<script>

import getDate from "@/utils/tool/date";
import moment from "moment";
import searchGroupDetail from "./searchGroupDetail";  //静态表格明细搜索组
import { searchCheckBoxArchives } from "@/components/PopUpLayer";           //物料多选组件

export default {
    components: {
        searchGroupDetail,
        searchCheckBoxArchives
    },
    props: {
        text: String,
        record: {
            type: Object,
            default: () => { }
        },
        col: {
            type: String
        },
        //动态字段集合
        dynamicAllData: {
            type: Array,
            default: () => []
        },
        dataSource: {
            type: Object,
            default: () => { }
        },
    },
    data() {
        return {
            value: this.text,
            editable: false,
            componentName: '',      //组件名
            processMethod: '',      //加工方式
            workFlag: '',           //工序标识

            valSelect: '',      //下拉选择数据
            columnType: [],     //组件类型
        };
    },
    mounted() {

    },
    created() {

    },
    watch: {
        processMethod(val) {
            console.log(`selected:`, val);
        },
    },
    methods: {
        moment,
        closeModel() {
            //关闭弹出层
            const closesModel = document.getElementById('closesModel');
            closesModel.addEventListener('click', (e) => {
                this.editable = false;
            }, false)
        },
        //==========================默认输入框==========================
        handleChange(e) {
            const value = e.target.value;
            this.value = value;
        },
        checkClose() {
            this.editable = false;
            this.$emit("change", this.value);
        },
        check() {
            this.editable = false;
            this.$emit("change", this.value);
        },
        handleSelectChange(value, label) {
            this.editable = false;
            this.value = label.componentOptions.children[0].text;
            this.$emit("change", value);
        },
        //==========================默认输入框==========================
        handleSelectBlur() {
            this.editable = false;
        },
        edit() {
            console.log(this.col, this.text);
            this.columnTypeFun(this.col);//获取当前组件是什么类型

            this.editable = false;
            this.editable = true;
            if (this.col == 'inventoryCode') {
                //物料编码
                this.$nextTick(() => {
                    //获取当前点击的输入框距离浏览器的定位信息
                    let clientDom = this.$refs.focusSearchid.$el.getBoundingClientRect();
                    this.$refs.searchRef.changePosition(clientDom);
                    this.$refs.focusSearchid.focus();
                    this.closeModel();
                });
            } else if (this.columnType == '搜索选择' && this.col != 'inventoryCode') {
                if (this.col == 'bankName' || this.col == 'bankAccount') {
                    //银行名称
                    this.componentName = 'bank';
                } else if (this.col == 'projectName') {
                    //项目 
                    this.componentName = 'project';
                } else if (this.col == 'currencyName') {
                    //币种
                    this.componentName = 'currency';
                } else if (this.col == 'officeName') {
                    //部门
                    this.componentName = 'office';
                } else if (this.col == 'workName' || this.col == 'workCode') {
                    //工序名称
                    this.componentName = 'process';
                } else if (this.col == 'bomVersion') {
                    //子件bom
                    this.componentName = 'bomVersion';
                } else if (this.col == 'workerName' || this.col == 'userName') {
                    //工人
                    this.componentName = 'workerName';
                } else if (this.col == 'warehouseName' || this.col == 'warehouseId') {
                    //仓库
                    this.componentName = 'warehouse';
                } else if (this.col == 'settleId' || this.col == 'settleName') {
                    //结算方式
                    this.componentName = 'clearmethod';
                } else if (this.col == 'invoiceTypeName') {
                    //发票类型
                    this.componentName = 'invoice';
                }

                this.$nextTick(() => {
                    this.$refs.searchComponents.showModal();
                })
            } else if (this.columnType == '日期') {
                this.$nextTick(() => {
                    this.$refs.timeRef.focus();
                });
            } else {
                this.$nextTick(() => {
                    this.$refs.focusid.focus();
                });
            }
        },
        searchBackData(record) {
            this.editable = false;
            if (record) {
                if (record.constructor === Object) {
                    this.value = record.name;
                    this.$emit("change", record);
                }
            } else {
                this.$emit("change");
            }
        },
        columnTypeFun(code) {
            //获取当前点击组件的类别
            this.dynamicAllData.forEach(item => {
                if (item.code == code) {
                    if (item.columnType == '下拉选择') {
                        this.valSelect = JSON.parse(item.val);
                    }
                    this.columnType = item.columnType;
                }
            })
        },

        //==========================日期==========================
        onChangeTime(d, string) {
            this.value = string;
            this.editable = false;
            let backData = {
                value: string,
                columnType: this.columnType
            }
            this.$emit("change", backData);
        },
        onOkTime() {
            this.value = getDate.getCurrentMoment().format('YYYY-MM-DD');
            this.editable = false;
            let backData = {
                value: this.value,
                columnType: this.columnType
            }
            this.$emit("change", backData);
        },
        onBlurTime() {
            //移出日期组件
            setTimeout(() => {
                this.editable = false;
            }, 200)
        },
        //==========================日期==========================

        //==========================下拉选择==========================
        dropDownChange(key) {
            let backData = {};
            this.valSelect.forEach(element => {
                if (key == element.key) {
                    backData = {
                        id: element.key,
                        name: element.label,
                        columnType: this.columnType
                    }
                }
            });
            this.$emit("change", backData);
        },
        dropDownBlur() {
            this.editable = false;
        },
        //==========================下拉选择==========================

        //==========================物料编码==========================
        archivesCheck(backData) {
            this.editable = false;
            this.editSearchtable = false;
            console.log(backData.length);
            if (backData) {
                if (backData.length >= 1) {
                    this.$emit("choiceAddData", backData);
                } else {
                    this.$emit("change", backData);

                    if (this.index == this.dataSource.length - 2) {
                        //点击可编辑的最后一行就新增一行
                        this.$emit('newAddData');
                    }
                }

            }
        },
        archivesEnter() {
            //搜索后点击回车
            this.$refs.searchRef.handleEnter();
        },
        archivesData(e) {
            const value = e.target.value;
            this.value = value;
            if (this.setTime) {
                clearTimeout(this.setTime)
            }
            this.setTime = setTimeout(() => {
                this.$refs.searchRef.inputVal = value;
                this.$refs.searchRef.getData(1);
            }, 500)
        },
        //==========================物料编码==========================
    },
};
</script>
<style lang="less">
#closesModel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 82;
    background: rgba(255, 255, 255, 0);
}
.editable-cell-process {
    position: relative;
    height: 30px;
    line-height: 30px;
    width: 100%;
    margin: 0 auto;
    cursor: pointer;
    .ant-input {
        height: 30px;
        text-align: left;
        font-size: 13px;
        padding: 0;
        border: 1px solid #000 !important;
    }
    .ant-select-selection--single {
        height: 28px !important;
    }
    .ant-select-selection {
        border: 1px solid #000 !important;
    }

    .editable-cell-input-wrapper {
        padding: 0;
    }
    .editable-cell-text-wrapper {
        padding: 0 2px;
        height: 100%;
        width: 100%;
    }
    .editable-cell-icon,
    .editable-cell-icon-check {
        position: absolute;
        right: 0;
        width: 20px;
        cursor: pointer;
    }

    .editable-cell-icon {
        line-height: 18px;
        display: none;
    }

    .editable-cell-icon-check {
        line-height: 28px;
    }

    .editable-cell:hover .editable-cell-icon {
        display: inline-block;
    }

    .editable-cell-icon:hover,
    .editable-cell-icon-check:hover {
        color: #108ee9;
    }

    .editable-add-btn {
        margin-bottom: 8px;
    }

    .editable-cell-input-search {
        position: relative;
    }
}
</style>